<template>
  <div>
    <base-modal
      class="material-apply-dialog-container"
      :show.sync="visible"
      :title="$t('task.edit.addMaterial')"
      width="900px"
      append-to-body
    >

      <div class="btn-group">
        <el-button type="primary" icon="el-icon-plus" @click="addMaterial">{{$t('task.edit.chooseMaterial')}}</el-button>
      </div>

      <material-table
        ref="materialTable"
        :data="data"
        :columns="columns"
        :warranty-status="warrantyStatus"
        :warranty-status-data="warrantyStatusData"
        :can-select-material="true"
        :allow-warranty-change="allowWarrantyChange"
        v-if="visible"
      />

      <div slot="footer">
        <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
        <el-button :disabled="pending" type="primary" @click="submit">{{$t('common.base.save')}}</el-button>
      </div>
    </base-modal>

    <!-- 服务BOM清单 -->
    <material-service-bom-dialog 
      ref="materialServiceRef"
      :dataList="data"
      :columns="columns" 
      @handleSubmit="handleSubmit" 
      :warranty-status="warrantyStatus"
      :warranty-status-data="warrantyStatusData"
      :productTemplate="productTemplate">
    </material-service-bom-dialog>
  </div>
</template>

<script>
/* components */
import MaterialTable from './MaterialTable.vue';
import MaterialServiceBomDialog from './MaterialServiceBomDialog.vue';

export default {
  name: 'choose-material-dialog',
  props: {
    fields: {
      type: Array,
      default: () => ([])
    },
    columns: {
      type: Array,
      default: () => ([])
    },
    allowWarrantyChange: {
      type: Boolean,
      default: false
    },
    warrantyStatus: {
      type: Number
    },
    warrantyStatusData: {
      type: Array,
      default: () => ([])
    },
    productTemplate: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      pending: false,
      visible: false,
      data: []
    }
  },
  computed: {

  },
  methods: {
    /**
    * @description 打开弹窗
    */
    open() {
      this.data = []
      this.pending = false
      this.visible = true

    },
    /**
    * @description 关闭添加物料弹窗
    */
    close() {
      this.visible = false;
    },
    /**
    * @description 添加物料
    */
    addMaterial() {
      this.$refs.materialServiceRef?.openMaterialList()
    },
    /**
    * @description 提交
    */
    submit() {
      this.$emit('submit', this.data);
    },
    togglePending(pending = false) {
      this.pending = pending;
    },
    handleSubmit(params) {
      this.data = params;
    }
  },
  components: {
    [MaterialTable.name]: MaterialTable,
    MaterialServiceBomDialog
  }
}
</script>

<style lang="scss" scoped>
.material-apply-dialog-container {
  ::v-deep .base-modal-body {
    padding: 24px;
  }

  .material-apply-method-panel {
    padding: 0 16px 16px;

    .el-radio {
      color: $text-color-regular;
      margin-right: 24px;
    }
  }

  .btn-group {
    padding: 10px 0;
  }

  .warehouse-form {
    display: flex;
    justify-content: space-between;
    .warehouse-form-select {
      margin-right: 40px !important;
    }
  }

  .apply-remark-panel {
    padding: 32px 16px;
  }

  ::v-deep .form-item label {
    width: 80px !important;
  }
}
</style>